<template>
  <div>
    <el-divider content-position="left">参照城市关系</el-divider>
    <el-row>
      <SkusTable
        :maxTableHeight="300"
        :dataSource="ReferTable.list"
        :columns="ReferTable.columns"
      />
    </el-row>
    <el-divider content-position="left">进价信息</el-divider>
    <el-row>
      <SkusTable
        :maxTableHeight="480"
        :dataSource="PurchaseTable.list"
        :columns="PurchaseTable.columns"
      />
    </el-row>
  </div>
</template>
<script>
import SkusTable from '@/components/skusTable';
import { TABLE_COLUMNS } from '../SetReferCities/constants/showReferCities';
import { VIEW_SINGLE_TABLE_COLUMNS, VIEW_MULTIPLE_TABLE_COLUMNS } from './constants';
import { PURCHASE_UNIT } from '../constants';
import { TableInfo } from '@/utils/getUtils';
export default {
  components: { SkusTable },
  props: {
    isPurchaseMultiUnit: {
      type: String,
      default: ''
    },
    areaInfoVos: {
      type: Array,
      default: () => []
    },
    priceInfoVos: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      ReferTable: new TableInfo({ columns: TABLE_COLUMNS }),
      PurchaseTable: new TableInfo({ columns: VIEW_SINGLE_TABLE_COLUMNS })
    }
  },
  watch: {
    areaInfoVos: {
      handler (list) {
        this.ReferTable.setList(list)
      },
      immediate: true,
      deep: true
    },
    priceInfoVos: {
      handler (list) {
        this.updatePurchaseColumns()
        this.PurchaseTable.setList(list)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 更新进价信息表列
    updatePurchaseColumns () {
      const columnsMaps = {
        [PURCHASE_UNIT.Single]: VIEW_SINGLE_TABLE_COLUMNS,
        [PURCHASE_UNIT.Multiple]: VIEW_MULTIPLE_TABLE_COLUMNS
      }
      this.PurchaseTable.setColumns(columnsMaps[this.isPurchaseMultiUnit] ?? [])
    }
  }
}
</script>
